<template>
	<view>
		<view class="bg-white flex justify-start align-center w-100" :style="{height: StatusBar+'px', overflowX: 'auto', whiteSpace: 'nowrap'}">
			
			
			<view class="inline-block relative padding-sm h-100 flex justify-start align-center">
				<text @tap="searchtp.change" class="">{{searchtp.kclxname ? searchtp.kclxname : '类型'}}</text>
				<text class="text-orange" :class="searchtp.show ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
				<view :style="{top: StatusBar*2+CustomBar+'px', zIndex: 999}" class="bg-white shadow w-100 fixed left0" v-show="searchtp.show" >
					<view style="white-space: normal;" class="padding-xs w-100">
						<text
							v-for="(lx, index) in searchtp.lxs"
							:key="index" 
							:data-kclxid="lx.kclxid" :data-kclxname="lx.lxname"
							:class="{'bg-g-main text-main radius':lx.checked}"
							@tap="searchtp.aa"
							class="padding-xs margin-xs bg-g-main text-main inline-block">{{lx.lxname}}</text>
					</view>
					<view
						class="bg-white w-100 padding-sm flex justify-around align-center">
						<button @tap="searchtp.clean" class="cu-btn bg-white text-green">清空</button>
						<button @tap="searchtp.cancel"  class="cu-btn bg-white text-red">取消</button>
					</view>
				</view>
			</view>
			
			<view class="inline-block relative padding-sm h-100 flex justify-center align-center">
				<text @tap="searchzt.change" class="">{{searchzt.ztname ? searchzt.ztname : '状态'}}</text>
				<text class="text-orange" :class="searchzt.show ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
				<view :style="{top: StatusBar*2+CustomBar+'px', zIndex: 999}" class="bg-white shadow w-100 fixed left0" v-show="searchzt.show" >
					<view style="white-space: normal;" class="padding-xs w-100">
						<text v-for="(zt,index) in searchzt.zts" :key="index" 
							@tap="searchzt.aa" :data-zt="zt.rs" :data-ztname="zt.name"
							class="padding-xs margin-xs bg-g-main text-main inline-block">{{zt.name}}</text>
					</view>
					<view
						class="bg-white w-100 padding-sm flex justify-around align-center">
						<button @tap="searchzt.clean" class="cu-btn bg-white text-green">清空</button>
						<button @tap="searchzt.cancel"  class="cu-btn bg-white text-red">取消</button>
					</view>
				</view>
			</view>
			
			<view class="inline-block relative padding-sm h-100 flex justify-center align-center">
				<text @tap="searchbx.change" class="">{{searchbx.bxname ? searchbx.bxname : '班型'}}</text>
				<text class="text-orange" :class="searchbx.show ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
				<view :style="{top: StatusBar*2+CustomBar+'px', zIndex: 999}" class="bg-white shadow w-100 fixed left0" v-show="searchbx.show" >
					<view style="white-space: normal;" class="padding-xs w-100">
						<text v-for="(bx,index) in searchbx.bxs" :key="index" 
							@tap="searchbx.aa" :data-bx="bx.rs" :data-bxname="bx.name"
							class="padding-xs margin-xs bg-g-main text-main inline-block">{{bx.name}}</text>
					</view>
					<view
						class="bg-white w-100 padding-sm flex justify-around align-center">
						<button @tap="searchbx.clean" class="cu-btn bg-white text-green">清空</button>
						<button @tap="searchbx.cancel"  class="cu-btn bg-white text-red">取消</button>
					</view>
				</view>
			</view>
			
			
			<view class="inline-block relative padding-sm h-100 flex justify-center align-center">
				<text @tap="searchdt.change" class="">{{searchObj.sd ? searchObj.sd + '~' + searchObj.ed : '日期'}}</text>
				<text class="text-orange" :class="searchdt.show ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
				<view :style="{top: StatusBar*2+CustomBar+'px', zIndex: 999}" class="bg-white shadow w-100 fixed left0" v-show="searchdt.show" >
					<view style="white-space: normal;" class="padding-xs w-100 flex">
						<picker class="" mode="date" :value="searchdt.sd" :start="nowDateStr"  @change="timeChange($event, searchdt, 'sd')">
							<view style="height: 1.7rem;" class="bg-g-main text-main radius padding-xs margin-xs">{{searchdt.sd ? searchdt.sd : '开始日期'}}</view>
						</picker>
						<picker class="" mode="date" :value="searchdt.ed" :start="nowDateStr"  @change="timeChange($event, searchdt, 'ed')">
							<view style="height: 1.7rem;" class="bg-g-main text-main radius padding-xs margin-xs">{{searchdt.ed ? searchdt.ed : '结束日期'}}</view>
						</picker>
					</view>
					<view
						class="bg-white w-100 padding-sm flex justify-around align-center">
						<button @tap="searchdt.clean" class="cu-btn bg-white text-green">清空</button>
						<button @tap="searchdt.cancel"  class="cu-btn bg-white text-red">取消</button>
						<button @tap="searchdt.aa" class="cu-btn bg-white text-blue">确认</button>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				nowDateStr: this.util.dateUtils.nowDateStr(),
				
				
				searchtp: {
					show: false,
					kclxid: "",
					kclxname: "",
					kclx: undefined,
					lxs: [],
					change: () => {
						this.cancelAll();
						this.searchtp.show = !this.searchtp.show;
					},
					aa: e => {
						this.searchtp.kclxname = e.currentTarget.dataset.kclxname; 
						this.searchtp.kclxid = e.currentTarget.dataset.kclxid;
						this.searchtp.show = false;
						this.searchObj.kclxid = e.currentTarget.dataset.kclxid;
						this.$emit("change", this.searchObj);
					},
					clean: () => {
						this.searchtp.kclxname = "";
						this.searchtp.kclxid = "";
						this.searchtp.show = false;
						this.searchObj.kclxid = "";
					},
					cancel: () => {
						this.searchtp.show = false;
					},
				},
				
				searchzt: {
					show: false,
					zt: "",
					ztname: "",
					zts: [{
						rs: "C",
						name: "已取消",
					},{
						rs: "B",
						name: "报名中",
					},{
						rs: "D",
						name: "进行中",
					},{
						rs: "F",
						name: "已完成",
					}],
					change: () => {
						this.cancelAll();
						this.searchzt.show = !this.searchzt.show;
					},
					aa: e => {
						this.searchzt.ztname = e.currentTarget.dataset.ztname; 
						this.searchzt.zt = e.currentTarget.dataset.zt;
						this.searchzt.show = false;
						this.searchObj.zt = e.currentTarget.dataset.zt;
						this.$emit("change", this.searchObj);
					},
					clean: () => {
						this.searchzt.ztname = "";
						this.searchzt.zt = "";
						this.searchzt.show = false;
						this.searchObj.zt = "";
					},
					cancel: () => {
						this.searchzt.show = false;
					},
				},
				
				
				searchbx: {
					show: false,
					bx: "",
					bxname: "",
					bxs: [{
						rs: 1,
						name: "私教课",
					},{
						rs: 6,
						name: "小班课",
					},{
						rs: 7,
						name: "大班课",
					}],
					change: () => {
						this.cancelAll();
						this.searchbx.show = !this.searchbx.show;
					},
					aa: e => {
						this.searchbx.bxname = e.currentTarget.dataset.bxname; 
						this.searchbx.bx = e.currentTarget.dataset.bx;
						this.searchbx.show = false;
						this.searchObj.bx = e.currentTarget.dataset.bx;
						this.$emit("change", this.searchObj);
					},
					clean: () => {
						this.searchbx.bxname = "";
						this.searchbx.bx = "";
						this.searchbx.show = false;
						this.searchObj.bx = "";
					},
					cancel: () => {
						this.searchbx.show = false;
					},
				},
				
				
				searchdt: {
					show: false,
					sd: "",
					ed: "",
					change: () => {
						this.cancelAll();
						this.searchdt.show = !this.searchdt.show;
					},
					aa: e => {
						if (!this.searchdt.sd) {
							this.message.error("请选择开始日期");
							return;
						}
						
						if (!this.searchdt.ed) {
							this.message.error("请选择结束日期");
							return;
						}
						
						this.searchObj.sd = this.searchdt.sd;
						this.searchObj.ed = this.searchdt.ed;
						this.$emit("change", this.searchObj);
						this.searchdt.show = false;
					},
					clean: () => {
						this.searchdt.sd = null;
						this.searchdt.ed = null;
						this.searchdt.show = false;
						this.searchObj.sd = null;
						this.searchObj.ed = null;
					},
					cancel: () => {
						this.searchdt.show = false;
					},
				},
				
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				
				searchObj: {
					kclxid: "",
					bx: "",
					zt: "",
					sd: null,
					ed: null,
				}
			};
		},
		created: function(){
			this.loadKclx();
		},
		methods: {
			timeChange: function(e, hpl, tag) {
				hpl[tag] = e.detail.value;
			},
			cancelAll: function() {
				this.searchtp.cancel();
				this.searchbx.cancel();
				this.searchdt.cancel();
			},
			loadKclx: function() {
				this.api("/kc/lx/list").send({}).then(data => {
					this.searchtp.lxs = data.lxs;
				});
			},
		}
	}
</script>

<style>
</style>